<template>
  <div pos="absolute left-0 top-0 z-1" wh-full overflow-hidden>
    <div pos="absolute right--300 top--900" class="<sm:(-right-100 -top-1170)">
      <corner-top :start-color="lightColor" :end-color="darkColor" />
    </div>
    <div
      pos="absolute left--200 bottom--400"
      class="<sm:(-left-100 -bottom-760)"
    >
      <corner-bottom :start-color="darkColor" :end-color="lightColor" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { CornerBottom, CornerTop } from "./components";
import { useThemeStore } from "@/store";
import { getColorPalette } from "@/utils";

const themeStore = useThemeStore();

const bgThemeColor = computed(() =>
  themeStore.darkMode
    ? getColorPalette(themeStore.themeColor, 7)
    : themeStore.themeColor
);

const lightColor = computed(() => getColorPalette(bgThemeColor.value, 3));
const darkColor = computed(() => getColorPalette(bgThemeColor.value, 6));
</script>

<style scoped></style>
